<template>
  <div class="all">
    <div class="search  flex-start">
      <div class="date">
        <!-- <label for="">会议号</label
        ><input class="searchInput" type="text" placeholder="请输入反馈日期" /> -->
        <operation ref="operation" @operation="getOperation"></operation>
      </div>
      <div class="type">
        <position ref="position" @position="getPosition"></position>
      </div>
      <div class="email">
        <!-- <label for="">发起人</label
        ><input class="searchInput" type="text" placeholder="请输入邮箱" /> -->
        <people ref="people" @people="getPeople"></people>
      </div>
      <div class="btnbox flex-start">
        <div class="btn-white2 cp" @click="resetSearch">重置</div>
        <div class="btn-blue2 cp" @click="getList">查询</div>
        <div class="open flex-start">
          <span class="blue" @click="changeState" v-if="flag === true"
            >展开</span
          >
          <span class="blue" @click="changeState" v-else>收起</span>
          <span class="openImg"><img :src="imgurl" alt="" /></span>
        </div>
      </div>
    </div>
    <div v-if="flag === false" class="line"></div>
    <div v-if="flag === false" class="search meetingTime flex-start">
      <!-- <div class="line"></div> -->
      <div class="time">
        <span>会议时间</span>
        <el-date-picker
          v-model="searchForm.startTime"
          type="date"
          placeholder="选择日期"
          :format="'yyyy-MM-dd HH:mm'"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          :clearable="false"
        >
        </el-date-picker>
        <span class="now">至</span>

        <el-date-picker
          v-model="searchForm.endTime"
          type="date"
          :format="'yyyy-MM-dd HH:mm'"
          :value-format="'yyyy-MM-dd HH:mm:ss'"
          placeholder="选择日期"
          :clearable="false"
        >
        </el-date-picker>
      </div>
    </div>
  </div>
</template>

<script>
import imgSrc1 from '@/assets/components/open.png'
import imgSrc2 from '@/assets/components/collect.png'
import Operation from './operation.vue'
import Position from './position.vue'
import People from './people.vue'

export default {
  props: {
    pageNum: Number,
    pageSize: Number
  },
  components: {
    Operation,
    Position,
    People
  },
  data () {
    return {
      flag: true,
      searchForm: {
        adminName: '',
        operatePart: '',
        page: 1,
        size: 10,
        roleId: '',
        startTime: '',
        endTime: ''
      }
    }
  },
  computed: {
    imgurl () {
      if (this.flag === true) {
        return imgSrc1
      } else {
        return imgSrc2
      }
    }
  },
  watch: {
    pageNum: {
      handler (val) {
        if (val) {
          // console.log(val)
          this.searchForm.page = val
          this.getList()
        }
      }
    },
    pageSize: {
      handler (val) {
        if (val) {
          this.searchForm.size = val
          this.getList()
        }
      }
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    changeState () {
      this.flag = !this.flag
    },
    getList () {
      const params = { ...this.searchForm, page: this.searchForm.page - 1 }
      // console.log(params)
      this.$store.dispatch('systemManage/getLogList', { params }).then(res => {
        // console.log(res)
      }).catch(res => {
        this.$message({
          type: 'error',
          message: res,
          duration: 1000
        })
      })
    },
    resetSearch () { // 重置表单
      this.searchForm = {
        adminName: '',
        operatePart: '',
        page: 1,
        size: 10,
        roleName: '',
        startTime: '',
        endTime: ''
      }
      this.$refs.people.reset()
      this.$refs.operation.reset()
      this.$refs.position.reset()
      this.getList()
    },
    getOperation (val) {
      this.searchForm.operatePart = val
    },
    getPosition (val) {
      this.searchForm.roleId = val
    },
    getPeople (val) {
      this.searchForm.adminName = val
    }
  }
}
</script>

<style lang="scss" scoped>
.meetingTime {
  flex-wrap: wrap;
  margin-top: 0px !important;
  .time {
    margin-left: 36px;
    .now {
      margin-left: 8px;
    }
    /deep/ .el-date-editor.el-input,
    .el-date-editor.el-input__inner {
      width: 280px;
      height: 40px;
      opacity: 1;
      background: #ffffff;

      border-radius: 5px;
      margin-left: 12px;
      outline: none;

      .el-input__icon {
        //   margin-left: 240px;
        position: absolute;
        left: 240px;
      }
    }
    /deep/ .el-date-table td span {
      border-radius: 2px !important;
    }
    /deep/ .el-date-picker {
      width: 280px !important;
      .el-picker-panel__content {
        width: 280px !important;
      }
    }
  }
}
.all {
  // overflow: hidden;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  // margin-top: 24px;
}

.search {
  width: 100%;
  height: 80px;
  background-color: #fff;
  position: relative;
  font-size: 14px;
  color: #3d4966;
  // margin-top: 0px;

  div {
    label {
      margin-right: 12px;
    }
  }
  .date {
    margin-left: 36px;
  }
  .type {
    margin-left: 20px;
  }
  .email {
    margin-left: 20px;
  }
  .btnbox {
    // height: 100%;
    // width: 213px;
    position: absolute;
    right: 24px;
    .btn-white2 {
      margin-right: 20px;
    }
    .open {
      margin-left: 24px;

      .openImg {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin-left: 8px;
        img {
          width: 100%;
        }
      }
    }
  }
}
</style>
